<template lang="pug">

.rating-list-wrapper
  cube-scroll(:data="filterRatings")
    ul.table(v-show="filterRatings.length>0")
      li.row(v-for="(item,index) in filterRatings" :key="index")
        .line
        .icon
          img.image(:src="item.avatar")
        .content
          .username-time 
            .name {{item.username}}
            .time {{format(item.rateTime)}}
          .star-container
            Star(:size=24 :score="item.score")
          .text {{item.text}}
          .rating-wrapper
            .rating-type
              span.iconfont(:class="{'icongood1':item.rateType===0,'iconbad1':item.rateType===1}")
            .recommends
              span.name(v-for="(recommend,index) in item.recommend" :key="index") {{recommend}}
    .noRating(v-show="filterRatings.length===0") 暂无评价

</template>

<script>
import formatMixin from '../../static/common/mixins/format'
import Star from '../star/star'

export default {

  mixins: [formatMixin],

  props: {
    filterRatings: {
      type: Array,
      default() {
        return []
      }
    }
  },

  components: {
    Star
  }

}

</script>

<style lang="stylus" scoped>
@import "../../static/common/stylus/variable"

.rating-list-wrapper
  height:100%
  box-sizing: border-box
  margin-left:18px
  margin-right:18px
  margin-bottom:8px
  .table
    width:100%
    .row
      margin-bottom:8px
      .line
        border-top:1px solid $color-light-grey-s
      .icon
        display:inline-block
        vertical-align:top
        margin-top:18px
        .image
          width:32px
          height:32px
          border-radius:50%
      .content
        display:inline-block
        margin-right:24px
        margin-left:12px
        margin-top:18px
        .username-time
          .name
            display:inline-block
            font-size:$fontsize-medium
            color:$color-background
          .time
            display:inline-block
            position:absolute
            right:0
            font-size:$fontsize-medium
        .star-container
          margin-top:4px
          width:50px
        .text
          display:inline-block
          margin-top:6px
          white-space:normal
          font-size: $fontsize-small-s
          line-height: 18px
        .rating-wrapper
          margin-top:8px
          .rating-type
            display:inline-block
            vertical-align:top
            .icongood1
              color:$color-blue
            .iconbad1
              color:$color-light-grey
          .recommends
            display:inline-block
            white-space:normal
            font-size: $fontsize-small-s
            .name
              display:inline-block
              margin-left:8px
              margin-bottom:8px
              padding-left:6px
              padding-right:6px
              line-height:16px
              border:1px solid $color-light-grey
              font-size: $fontsize-small-s
  .noRating
    font-size:$fontsize-medium
    margin-top:16px

</style>
